<template>
  <!-- 面试技巧列表 -->
  <div class="technicList">
    <!-- title -->
    <div class="title">
      <div>面试技巧</div>
      <i class="iconfont iconbtn_nav_back" @click="rollback"></i>
    </div>
    <!-- 搜索 -->
    <div class="search" @click="$router.push(`/search/${technic}`)">
      <input type="search" placeholder="请输入关键字" />
      <i class="iconfont iconicon_search"></i>
    </div>
    <!-- 列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="我也是有底线的"
      @load="onLoad"
    >
      <div class="interview">
        <div
          class="content "
          v-for="(item, index) in technicList"
          :key="index"
          @click="technicDetail(item.id)"
        >
          <!-- 左 -->
          <div class="content_left">
            <div class="content_title">{{ item.title }}</div>

            <div class="content_btm">
              <div class="left">
                {{ item.created_at | formaTime }}
              </div>
              <div class="right">
                <div class="see">
                  <i class="iconfont iconicon_liulanliang"></i>
                  <span>{{ item.read }}</span>
                </div>
                <div class="like">
                  <i class="iconfont iconicon_dianzanliang"></i>
                  <span>{{ item.star }}</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 右 -->
          <div class="img_right">
            <img :src="item.cover" alt="" />
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { articlesTechnic } from '@/api/api.js'
import moment from 'moment'
export default {
  data () {
    return {
      technicList: [],
      key: this.$route.params.key,
      start: 0,
      limit: 6,
      loading: false,
      finished: false,
      artid: '',
      technic: 'technic'
    }
  },
  methods: {
    rollback () {
      this.$router.go(-1)
    },
    async onLoad () {
      this.loading = true
      const res = await articlesTechnic({
        start: this.start,
        limit: this.limit,
        q: this.key
      })
      res.data.list.forEach(val => {
        if (val.cover) {
          val.cover = process.env.VUE_APP_URL + val.cover
        }
      })
      this.technicList = [...this.technicList, ...res.data.list]
      this.loading = false
      if (this.technicList.length === res.data.total) {
        this.finished = true
      }
    },
    technicDetail (id) {
      this.$router.push(`/technicDetail/${id}`)
    }
  },
  filters: {
    formaTime (val) {
      return moment(val).format('YYYY-MM-DD')
    }
  }
}
</script>

<style lang="less" scoped>
.technicList {
  .title {
    position: relative;
    width: 100%;
    text-align: center;
    height: 46px;
    line-height: 46px;
    padding: 0 10px;
    div {
      color: #3b3a3a;
      font-size: 18px;
    }
    i {
      position: absolute;
      top: 0;
      left: 5px;
      font-size: 46px;
      color: #000;
    }
  }
  .search {
    position: relative;
    text-align: center;
    padding: 0 10px;
    input {
      width: 100%;
      height: 36px;
      border: 0;
      background-color: #f7f4f5;
      font-size: 14px;
      color: #cccc;
      text-align: center;
      border-radius: 25px;
    }
    i {
      position: absolute;
      top: 8px;
      left: 118px;
      color: #ccc;
      font-size: 20px;
    }
  }
  .interview {
    .content {
      display: flex;
      padding: 0 15px;
      margin-top: 20px;
      .content_left {
        flex: 9;
        margin-right: 15px;
        .content_title {
          font-size: 17px;
          color: #000;
          margin-bottom: 25px;
        }
        .content_btm {
          display: flex;
          font-size: 12px;
          line-height: 18px;
          align-items: center;
          color: #b4b4bd;
          .left {
            flex: 1;
          }
          .right {
            display: flex;
            flex: 1;
            .see,
            .like {
              position: relative;
              flex: 1;
              text-align: center;
              i {
                position: absolute;
                top: 0;
                left: 0;
              }
              .iconicon_dianzanliang {
                position: absolute;
                top: 0;
                left: 0;
                padding-left: 20px;
              }
            }
            .like {
              flex: 1;
              text-align: right;
            }
          }
        }
      }
      .img_right {
        flex: 5;
        border: 0;
        img {
          width: 100%;
          height: 80px;
          border-radius: 5px;
        }
      }
    }
  }
}
</style>
